<template>
  <div>
    <header-nav-vue></header-nav-vue>
    <listContainerVue></listContainerVue>
    <recommendVue></recommendVue>
    <rankVue></rankVue>
    <likeVue></likeVue>
    <floorVue
      v-for="item in floorList"
      :key="item.id"
      :floorlist="item"
    ></floorVue>
    <brandVue></brandVue>
  </div>
</template>

<script>
//引入其他组件
import listContainerVue from "./listContainer/listContainer.vue";
import rankVue from "./rank/rank.vue";
import recommendVue from "./recommend/recommend.vue";
import likeVue from "./like/like.vue";
import floorVue from "./floor/floor.vue";
import brandVue from "./brand/brand.vue";

import { mapState } from "vuex";

export default {
  name: "home-vue",
  components: {
    listContainerVue,
    recommendVue,
    rankVue,
    likeVue,
    floorVue,
    brandVue,
  },
  computed: {
    ...mapState({
      floorList: (state) => state.home.floorList,
    }),
  },
  mounted() {
    this.$store.dispatch("getFloorList");
  },
};
</script>

<style>
</style>